<template>
  <div>
    <h3>专门用于组件学习的</h3>
    <h4>list组件：上拉加载</h4>
    <!-- list
       1:导入与注册
       2：van-list
              v-model:是否处于加载中
              finished:是否加载完成
              finished-text:加载完成后的文本内容显示
              @load="load" 当滚动条距离底部小于300时会自动执行load方法，执行过程中会自动将v-model的值改为true  -->
    <!-- 使用：
         1:导入与注册
         2：使用van-list将需要使用上拉加载的列表包起来
         3：配制参数 v-model finished finished-text  @load
         4:核心就是load方法
              加载完成要做什么（该方法是用于加载数据）
                 a:将v-model的值改成false
                 b:数据要累加
                 c:有时候要做页码调整
                 d:判断是否全部加载完成
                    如果完成  finished=true -->

    <div class="main">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <div v-for="item in list" :key="item">{{ item }}</div>
      </van-list>
    </div>

    <div v-if="false">
      <h4>导航栏--navbar组件</h4>
      <!-- navbar组件
             组件名--van-nav-bar
               title--标题
               left-text--左边的文本内容
               right-text--右边的文本内容
               left-arrow---左边小箭头
               @click-left--左边点击事件
               @click-right--右边点击事件
     -->
      <van-nav-bar title="面经登录" left-arrow right-text="其它"></van-nav-bar>
      <h4>输入框-van-field</h4>
      <!-- 输入框组件
            组件名----van-field
                v-model---值的双向绑定
                label-----左边标题
    -->
      <p>{{ msg }}</p>
      <van-field v-model="msg" label="用户名"></van-field>
      <h4>按钮--van-button</h4>
      <!-- 按钮
              组件名---van-button
                  type='primary....'不同样式的按钮
                  block------块级按钮（独占一行）
                  color="#7232dd"可以自定义按钮颜色值
      -->
      <van-button block color="#fa6d1d">提交</van-button>
      <!-- 表单验证
           表单验证--主体针对 vant
           实现步骤
              1-用van-form将表单元素包起来（需要将Form组件导入注册）
              2-在van-field表单元素身上绑定验证规则
                  用户名长度是6-12位
                  van-field  :rules='[
                  {required:true,message:'错误信息',trigger:'触发条件onBlur/onChange'},
                  { pattern:/^\w{6,12}$/,message:'错误信息',trigger:'触发条件onBlur/onChange'}]'
              3-调用van-form组件内的validate方法实现表单验证（全局表单验证--对所有的表单元素触发验证）
                通过ref调用(a:van-form  ref='form'  b:this.$refs.form.validate().then(()=>成功).catch((err)=>失败,err是错误信息))
                   1--获取原生标签dom
                   2--获取组件的实例对象（组件的this）
    -->
      <van-form ref="form" v-if="false">
        <van-field
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'onChange' },
            {
              pattern: /^\w{6,12}$/,
              message: '请输入6-12位用户名',
              trigger: 'onChange'
            }
          ]"
          label="用户名"
          v-model="form.username"
        ></van-field>
        <van-field
          label="密码"
          :rules="[
            { required: true, message: '请输入密码', trigger: 'onChange' },
            {
              pattern: /^\w{6,12}$/,
              message: '请输入6-12位密码',
              trigger: 'onChange'
            }
          ]"
          v-model="form.password"
        ></van-field>
      </van-form>
      <HmForm ref="hmform"></HmForm>
      <button @click="btnClick">提交（提交前需要做全局表单验证）</button>
      <h3>轻提示--toast</h3>
      <!--  vue文件中使用
            先导入注册(vant.js中导入注册了)
            最基本使用:this.$toast('提示内容')
            其它使用：
                  成功:this.$toast.success('内容')
                  失败:this.$toast.fail('内容')
                  加载中:this.$toast.loading({
                    message:'内容',
                    forbidClick: true,(禁止点击背景),
                    duration:时长(2000)(默认2秒就消失) 如果值为0就是不消失
                      希望消失：
                          1：再来一个toast消息,该消息就会将前面消息销毁
                          2：this.$toast.clear() 清理taost提示
                  })
        js文件中使用
             先导入才可使用
               import {Toast} from 'vant'
               这里的Toast====vue文件中的this.$toast
                  成功:Toast.success('内容')
     -->
      <van-button @click="toastClick">消息提示</van-button>
      <h3>单元格---cell</h3>
      <!-- 单元格组件-van-cell
             van-cell
                title:标题（左边的内容）
                value:值(右边的内容)
                lable:下面的内容
                slot---default对应value的内容  title与label都有具名插槽   -->
      <van-cell
        v-if="false"
        title="我是cell标题"
        value="我是内容"
        label="我是内容描述"
      ></van-cell>
      <van-cell
        v-if="false"
        title="性别"
        value="男"
        label="点击修改性别"
      ></van-cell>
      <van-cell v-if="false">
        我是内容
        <template #title>
          我是标题，使用的是插槽
        </template>
        <template #label>
          我是描述，使用的是label插槽
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
import HmForm from './components/hm-form.vue'
export default {
  components: {
    HmForm
  },
  data () {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      loading: false,
      finished: false,
      msg: '',
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    load () {
      // list中加到20条数据，完成了就停止
      setTimeout(() => {
        // 数据累加
        this.list.push(this.list.length + 1)
        // 将v-model的值改成false
        this.loading = false
        // 判断是否加载完成
        if (this.list.length >= 20) {
          // 加载完成，停止加载
          this.finished = true
        }
      }, 1000)
      console.log('load')
    },

    btnClick () {
      //   this.$refs.hmform.validate()
      this.$refs.form
        .validate()
        .then(() => {
          // 验证成功了
        })
        .catch(err => {
          // 验证失败了 err失败的验证错误信息
          console.log(err)
        })
    },
    // 消息提示
    toastClick () {
      //   this.$toast('我是基本消息提示')
      //   this.$toast.success('我是成功消息提示')
      //   this.$toast.fail('我是失败消息提示')
      //   this.$toast.loading('我是loading消息提示')
      this.$toast.loading({
        message: '我是loading消息提示',
        forbidClick: true,
        duration: 5000
      })
      setTimeout(() => {
        // this.$toast.success('我是成功消息提示')
        this.$toast.clear()
      }, 500)
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  width: 300px;
  height: 150px;
  border: 5px solid red;
  overflow-y: auto;
}
</style>
